<template>
	<view class="shop-car">
		
		<view class="common-car" >
			
				<view class="shop-car" >
					
					<view class="store-box" >
						
						<view class="goodsInfo" >
							<image src="../../static/selected.png" v-if="point.checked == 2" class="checked-image"
								mode="" @tap="goodsCheck(indexq,indexw,itemw.checked)"></image>
							<image src="../../static/selected2.png" v-else class="checked-image" mode=""
								@tap="goodsCheck(indexq,indexw,itemw.checked)"></image                       >
							<view class="goodsInfo-right">
								<image :src="point.storeUrl" class="goods-image" mode=""></image>
								<view class="goodsInfo-box">
									<text class="goods-name">{{point.storeName}}</text>
									<text class="spe">距离您步行大约：itemw.distance}}</text>
									<view class="goods-box">
										<text class="goods-price">{{point.address}}</text>
										
									</view>
								</view>
							</view>
						</view>
					</view>
				
					
				</view>
			</view>
		

		<button class="add-btn" @click="chooseLocation">选择自取点地址</button>
		
		
	</view>
</template>

<script>
	
	import {
		getSelfPoint
	} from "@/server/order.js"

	export default {
		data() {
			return {
				param:{
					limit:200,
					page:1,
					latitude:"",
					longitude:"",
				},
				point:[],
			}
		},
		components: {
			
		},
		onLoad(options) {
		   this.getSelfPoint()
		},
		methods: {
			delect(e) {
				console.log(e);
			},
			accounts(e) {
				console.log(e);
			},

			getSelfPoint() {
				console.log("*&*&*&**&*&*")
				uni.getLocation({
					success: (res) => {
						console.log("*(*(&*&*&*))")
						console.log(res)
				   this.param.latitude= res.latitude
					 this.param.longitude=res.longitude
					getSelfPoint(this.param).then(data => {
						  this.point=data.list[0]
							this.point.storeUrl="http://192.168.31.120:8100/media/image/2021/1018/17/1450032957610921984.jpeg"
					   console.log("&&&&&&&&&&&&&&")
					   console.log( this.point)
					})
					},
					fail(err) {
						console.log(err)
					}
				})
         
				
			}

		},
		}
</script>

<style lang="scss" scoped>
	.shop-car {
		width: 750rpx;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		background: #F5F5F5;
	}

	.add-btn {
		position: fixed;
		left: 30upx;
		right: 30upx;
		bottom: 16upx;
		z-index: 95;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 690upx;
		height: 80upx;
		font-size: 32upx;
		color: #fff;
		background-color: $base-color;
		border-radius: 10upx;
		box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
	}
</style>

<style lang="scss" scoped>
	.common-car {
		display: flex;
		flex-direction: column;
		align-items: center;
		background: #F5F5F5;
	}

	.empty-shop-car {
		width: 750rpx;
		min-height: 680rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		.empty-shop-car-image {
			width: 340rpx;
			height: 278rpx;
			margin-top: 102rpx;
		}

		text {
			margin-top: 40rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: #666666;
		}

		.empty-shop-car-btn {
			width: 240rpx;
			height: 90rpx;
				
			background: #fa4940;
			border-radius: 200rpx;
			margin-top: 40rpx;
			text-align: center;
			line-height: 90rpx;
			font-size: 30rpx;
			font-weight: 400;
			color: #313133;
		}
	}

	.shop-car {
		width: 750rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		.shop-car-header {
			width: 690rpx;
			height: 80rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: flex-end;

			text {
				font-size: 28rpx;
				font-weight: 400;
				color: #313133;
			}
		}

		.store-box {
			width: 750rpx;
			margin-bottom: 20rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			background-color: #FFFFFF;

			.store-header {
				width: 690rpx;
				height: 78rpx;
				padding: 0 30rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				font-size: 28rpx;
				font-weight: 400;
				color: #313133;

				.checked-image {
					width: 36rpx;
					height: 36rpx;
				}

				text {
					font-size: 28rpx;
					font-weight: 400;
					color: #313133;
					margin-left: 20rpx;
				}

				.label {
					width: 14rpx;
					height: 24rpx;
					margin-left: 10rpx;
					margin-top: 5rpx;
				}
			}

			.goodsInfo {
			
	
				display: flex;
				flex-direction: row;
				align-items: center;
				border-bottom: 2rpx solid #EDEDED;

				&:nth-last-child(1) {
					border: none;
				}

				.checked-image {
					width: 36rpx;
					height: 36rpx;
				}

				.goodsInfo-right {
					width: 634rpx;
					height: 246rpx;
					margin-left: 20rpx;
					display: flex;
					flex-direction: row;
					align-items: center;

					.goods-image {
						width: 120rpx;
						height: 150rpx;
					}

					.goodsInfo-box {
						width: 428rpx;
						margin-left: 24rpx;
						display: flex;
						flex-direction: column;
						align-items: center;

						.goods-name {
							width: 428rpx;
							font-size: 26rpx;
							font-weight: 400;
							color: #313133;
						}

						.spe {
							width: 428rpx;
							margin-top: 10rpx;
							font-size: 24rpx;
							font-weight: 400;
							color: #919298;
						}

						.goods-box {
							width: 428rpx;
							margin-top: 18rpx;
							display: flex;
							flex-direction: row;
							align-items: center;
							justify-content: space-between;

							.goods-price {
								font-size: 32rpx;
								font-weight: 400;
								color: #313133;
							}

							.goods-num-box {
								width: 168rpx;
								height: 46rpx;
								display: flex;
								flex-direction: row;
								align-items: center;

								.goods-image {
									width: 46rpx;
									height: 44rpx;
									text-align: center;
									line-height: 44rpx;
									border: 1rpx solid #CFCFCF;
									font-size: 38rpx;
								}

								.goods-num {
									width: 76rpx;
									height: 44rpx;
									text-align: center;
									line-height: 44rpx;
									font-size: 33rpx;
									font-weight: 400;
									color: #666666;
									border-top: 1px solid #CFCFCF;
									border-bottom: 1px solid #CFCFCF;
								}
							}
						}
					}
				}
			}
		}

		.statistics-box {
			width: 750rpx;
			display: flex;
			margin-bottom: 30px;
			flex-direction: column;
			align-items: center;
			background-color: #FFFFFF;
			position: fixed;
			bottom: 0;

			.statistics {
				width: 720rpx;
				padding: 0 0 0 30rpx;
				height: 98rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;

				.statistics-left {
					width: 120rpx;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: space-between;

					image {
						width: 36rpx;
						height: 36rpx;
					}

					text {
						font-size: 30rpx;
						font-weight: 400;
						color: #313133;
					}
				}

				.statistics-right {
					width: 600rpx;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: flex-end;

					.btn {
					  padding: 6px 60upx;
						border-radius: 100px;
						background: rgba(252, 2, 8, 1.0);
						text-align: center;
						
						font-size: 30rpx;
						font-weight: 400;
						color: #FFFFFF;
						margin-left: 40rpx;
					}

					text {
						font-size: 30rpx;
						font-weight: 500;
						color: #FFFFFF;
					}

					.text-color {
						color: rgba(242, 18, 18, 1);
					}
				}
			}

			.gap {
				width: 750rpx;
				height: 40rpx;
			}
		}
	}
</style>
